<template>
	<view>
		<view class="header">
			<view class="text-1">我的</view>
			<view class="header-1" style="margin-left: 32rpx;">
				<view class="header-1-1">
					<image src="../../static/@1/wode 1_slices/zu428.png" mode=""></image>
				</view>
				<view class="header-1-2" style="margin-left: 24rpx;">
					<text class="text-1-1">立即登录</text>
					<text class="text-1-2">登录后可收藏喜欢的菜谱</text>
				</view>
			</view>
		</view>
		<view class="bacImg"></view>
		<view class="backImg-1"></view>
		<view class="backImg-2">
			<view class="backImg-2-1">
				<image src="../../static/@1/caipusousuo_slices/mengbanzu279.png" mode=""></image>
				<text>我的收藏</text>
			</view>
			<view class="backImg-2-1">
				<image src="../../static/@1/wode 1_slices/mengbanzu 281.png" mode=""></image>
				<text>浏览记录</text>
			</view>
			<view class="backImg-2-1">
				<image src="../../static/@1/wode 1_slices/mengbanzu282.png" mode=""></image>
				<text>点赞</text>
			</view>
		</view>
		<view class="backImg-1"></view>
		<view class="main">
			<view class="main-1">
				<view class="main-1-1">
					<view class="main-1-1-1">
						<text class="speAll actived">所有食材</text>
						<text>所有食材</text>
						<text>所有食材</text>
						<text>所有食材</text>
						<text>所有食材</text>
					</view>
				</view>
				<view class="main-1-1">
					<view class="main-1-1-2">
						<text class="suibian">123</text>
						<text>456</text>
					</view>
				</view>
				<view class="main-1-1">9</view>
				<view class="main-1-1">9</view>
				<view class="main-1-1">9</view>
				<view class="main-1-1">9</view>
			</view>
		</view>
		<view class="dani"></view>
		
		
	</view>

</template>

<script>
	export default {

	}
</script>

<style lang="scss" scoped>
	.header {
		width: 750rpx;
		height: 280rpx;
		overflow: hidden;

		.text-1 {
			height: 36rpx;
			width: 100%;
			line-height: 36rpx;
			text-align: center;
			font-size: 36rpx;
			margin-top: 112rpx;
		}

		.header-1 {
			// border: 1px solid red;
			height: 114rpx;
			width: 100%;
			display: flex;
			justify-content: center;
			align-items: center;

			.header-1-1 {
				width: 118rpx;
				height: 118rpx;

				image {
					width: 100%;
					height: 100%;
				}
			}

			.header-1-2 {
				flex-grow: 1;
				// border: 1px solid red;
				display: flex;
				flex-direction: column;

				.text-1-1 {
					font-size: 30rpx;
					color: rgb(137, 137, 137);
					margin-bottom: 20rpx;
				}

				.text-1-2 {
					font-size: 20rpx;
					color: rgb(209, 209, 209);
				}
			}
		}
	}

	.bacImg {
		width: 688rpx;
		height: 118rpx;
		margin: 0 auto;
		background-image: url("../../static/@1/wode 1_slices/mengbanzu87.png");
	}

	.backImg-1 {
		height: 20rpx;
		width: 750rpx;
		background-color: rgb(245, 245, 245);
	}

	.backImg-2 {
		padding: 0 34rpx;
		box-sizing: border-box;
		height: 122rpx;
		width: 750rpx;
        display: flex;
		justify-content: space-between;
		.backImg-2-1 {
			height: 120rpx;
			width: 112rpx;
			display: flex;
			flex-direction: column;
			justify-content: center;
			align-items: center;
			image {
				height: 44rpx;
				width: 44rpx;
			}
			text {
				font-size: 28rpx;
			}
		}
	}
	.main{
		height: 492rpx;
		width: 750rpx;
		color: rgb(140, 140, 140);
		.main-1{
			width: 658rpx;
		
			// border: 1px solid red;
			margin: 0 auto;
			display: flex;
			flex-direction: column;
			.main-1-1{
				width: 100%;
				height: 82rpx;
				border-bottom: 1px solid rgb(246, 246, 246);
				display: flex;
				align-items: center;
				.main-1-1-2{
					width: 100%;
					height: 40rpx;
					display: flex;
					align-items: center;
					text{
						font-size: 36rpx;
					}
					.suibian{
						margin-right: 336rpx;
					}
				}
				.main-1-1-1{
					width: 100%;
					height: 40rpx;
					display: flex;
					align-items: center;
					text{
						font-size: 22rpx;
						margin-right: 36rpx;
					}
					.speAll{
						font-size: 28rpx;
						margin-right: 32rpx;
					}
				}
			}
		}
	}
	.actived{
		color: yellow;
	}
	.dani{
		height: 20rpx;
		width: 750rpx;
		background-color: rgb(245, 245, 245);
	}
	
	
	
	
</style>
